{% extends "云商/后台/template.html" %}
{% block title %}{% endblock %}
{% block css %}
<style>
    .layui-form-label {
        width: auto;
    }
</style>

{% endblock %}
{% block body %}

<div class="Yy-plr-15px Yy-ptb-15px ">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" placeholder="请输入商品标题(200字以内)" autocomplete="off"
                    class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品价格(保留两位小数)</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="number" name="price_min" placeholder="1" autocomplete="off" class="layui-input" min="0"
                        step="1" lay-affix="number" lay-verify="required">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 80px;">
                    <input type="number" name="price_max" placeholder="00" autocomplete="off" class="layui-input"
                        min="0" step="1" lay-affix="number" value="00">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">上传商品封面</label>
            <div class="layui-input-block">
                <div class="layui-btn-container Yy-d-flex">
                    <input type="file" name="goods_main_img">
                    <img id="tempImg" style="width: 230px;">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">上传文件</label>
            <div class="layui-input-block">
                <input type="file" name="goods_file">
            </div>
        </div>

        <div class="layui-form-item Yy-mt-30px">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="upload">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>






</form>
</div>



{% endblock %}
{% block js %}
<script>


</script>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;

        const img_file = document.querySelector('input[name="goods_main_img"]');
        const data_file = document.querySelector('input[name="goods_file"]');
        const img = document.querySelector('#tempImg');
        // 图片文件
        img_file.addEventListener('change', (e) => {
            const imgFile = e.target.files[0];
            img.src = URL.createObjectURL(imgFile);
            img.style.height = '230px';
        });

        // 提交事件
        form.on('submit(upload)', function (data) {
            var field = data.field; // 获取表单字段值
            console.log(field);
            const imgFile = img_file.files[0];
            const dataFile = data_file.files[0];
            const name = field.name;
            const price = field.price_min + '.' + field.price_max;

            if (name == '' || price == '') {
                layer.msg('请填写完整');
                return false;
            }
            var formData = new FormData();

            formData.append('name', name);
            formData.append('price', price);
            formData.append('goods_main_img', imgFile);
            formData.append('goods_file', dataFile);
            formData.append('user', Yyuser_info.id);

            axios({
                url: '/api/CloudShop/add/CloudShop_Goods_Add/',
                method: 'POST',
                data: formData
            }).then(res => {
                // YyFormReset('.layui-form')
            })
            return false; // 阻止默认 form 跳转
        });

    });
</script>
{% endblock %}